<template>
  <div>
      <!-- 输入框 -->
      <div class="search">
         <el-input 
         placeholder="搜索商品, 共130020款好物" 
         class="search-ipt"
         :prefix-icon="Search"
         ></el-input>
      </div>
      <!-- 主体 -->
      <div class="main">
        <!-- 左侧菜单栏 -->
        <div class="main-nav">
          <el-row class="tac">
            <el-col :span="24">
              <el-menu
              default-active="0"
              >
                <el-menu-item 
                 v-for="(item,idx) in (category)" 
                 :key="idx" 
                 :index="idx+''"
                 @click="chageNav(idx,item.id)"
                 >
                  <span>{{item.name}}</span>
                </el-menu-item>
               
              </el-menu>
            </el-col>
          </el-row>
        </div>
   
        <!-- 右侧列表 -->
        <div class="mian-list"     >
          <!-- 右侧顶部图片 -->
          <div v-loading="loading" class="mian-list-image">
             <img :src="picUrl" alt="">
          </div>
          <!-- 右侧下面循环体 -->
          <div class="main-list-commodity" >
            <div  class="commodity" v-for="(item,index) in categoryGroupList" :key="index">
              <div  class="commodity-title">{{item.name}}</div>
              <div class="commodity-list"  >
                <div   class="commodity-details" @click="goDetail(current)" v-for="(current,index1)  in item.categoryList" :key="index1">
                  <div v-loading="loading" class="commodity-details-img"><img :src="current.wapBannerUrl" alt=""></div>
                  <p>{{current.name}}</p>
                </div>
              </div>
            </div>
          </div>
        </div>
        
      </div>
      <Tabbar/>
  </div>
</template>

<script setup lang="ts">
import { ElInput } from 'element-plus';
import {  Search } from '@element-plus/icons-vue';
import {  onMounted,ref ,onBeforeMount, watch, reactive} from 'vue';
import {useCategoryStore} from '../../stores/catrgory'
import Tabbar from '../../components/tabbar/tabar.vue'
import {useRouter} from 'vue-router'
const router = useRouter()
const loading = ref(false)
let  categoryStore:any = useCategoryStore()
let category:any = ref([])
let currentCategory:any = ref([])
let picUrl :any = ref('')
let arr = ref('')
let categoryGroupList:any = ref([])


// 参数
let obj = reactive({
  __timestamp:1669388595302,
   categoryId:arr.value,
})
onBeforeMount(()=>{
  list(obj)
})
const list = async(obj:any) =>{
  loading.value = true
  let res = await  categoryStore.recommendList(obj)
  // console.log(res);
  category.value = res.categoryL1List
  currentCategory.value = res.currentCategory
  picUrl.value = res.currentCategory.bannerList[0].picUrl
  categoryGroupList.value = res.categoryGroupList
  loading.value = false
  // console.log(category.value,res);
}
  const chageNav = (idx:any,id:any)=>{
    if (idx == '0') {
      picUrl.value = currentCategory.value.bannerList[0].picUrl
    }else{
      picUrl.value = category.value[idx].bannerUrl
    }
    arr.value = id
 }
 watch(arr,(a,b)=>{
    // console.log(a,b);
    if(a == '11') return arr.value = ''
    obj.categoryId = arr.value
    list(obj)
 },{
  deep:true
 })
 const goDetail=(e:any)=>{
    router.push({
      path:'/particulars',
      query:{
        categoryId:e.superCategoryId,
        subCategoryId: e.id,
        categoryType:e.categoryType
      }
    })
    
    
    
    
 }
  
// 获取为你推荐列表

</script>
<style scoped>
*{
  margin: 0;
  padding: 0;
}
.search{
   padding:5px 10px;
   background: #fff;
   border-bottom: 1px solid #d9d9d9;
}
 .search /deep/ .el-input__inner {
  height: 16px;
  text-align: left;
  font-size: 9px;
}
.search /deep/ .el-input__prefix{
  padding-left: 30%;
  font-size: 12px;
}
.search /deep/ .el-input__wrapper{
  background: #ededed;
  height: 16px;
}
.search /deep/ input::-webkit-input-placeholder {
  -webkit-text-fill-color: #666 !important;
}
.main{
  display: flex;
  width: 100%;
  height: 100vh;
}
.main-nav{
  width: 30%;
  height: 100%;
  border-right: 1px solid #d9d9d9;
}
.main-nav /deep/ .el-menu{
  border: none;
}
.main-nav /deep/ .el-menu-item:hover{
  background: none;
}

.main-nav /deep/ .el-menu-item{
  font-size: 12px;
  border-left: 3px solid #fff;
  height: 25px;
  line-height: 25px;
  margin: 24px 0;
  display: block;
  width: 100%;
  text-align: center;
  padding-left: 6px !important;
}
.main-nav /deep/ .is-active{
  color: #ab2b2b;
  border-left: 3px solid #ab2b2b;
}



.mian-list{
  padding: 12px 14px;
  width: 100%;
}
.mian-list-image{
  width: 100%;
  height: 90px;
  border-radius: 2px;
  overflow: hidden;
  background: #ededed;
}
.mian-list-image img{
  width: 100%;
  height: 100%;

}
.main-list-commodity{
  height: 100%;
}
.commodity{
  margin: 10px 0 ;
}
.commodity-title{
  padding: 5px 0;
  font-size: 12px;
  font-weight: bold;
  border-bottom: 1px solid #ededed;
}
.commodity-list{
  width: 100%;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.commodity-details{
  box-sizing: border-box;
  margin: 20px 4px 0 4px;
  width: 30%;
  height: 85px;
}
.commodity-details-img{
  width: 80%;
  height: 80%;
  margin: 0 auto;
}
.commodity-details-img > img{
  width: 100%;
  height: 100%;
}
.commodity-details p{
  width: 80%;
  margin: 0 auto;
  height: 20%;
  text-align: center;
  font-size: 10px;
  line-height: 20px;
  color: #333;
}
</style>